<template>
	<view>
		<view class="prefer-posi">
			<!-- 筛选区域开始 -->
			<view class="delica-view">
				<view class="delica-list delica-grow" @click="multiple()">
					<text>{{synthesize}}</text>
					<text class="icon-sort-full i-image"></text>
				</view>
				<view class="delica-grow" @click="saLes()">销售高</view>
				<view class="delica-grow" @click="spDed()">速度快</view>
				<view class="delica-grow" @click="unIcon()">津贴联盟</view>
				<view class="delica-list delica-right" @click="scReen()">
					<text>筛选</text>
					<text class="icon-shaixuan"></text>
				</view>
			</view>
			<!-- 筛选区域结束 -->
			<!-- 综合排序开始 -->
			<view class="sortlist sortlitetle" v-if="drop">
				<block v-for="(item, index) in sortlist" :key="index">
					<text 
					:class="{actived: index == num }" 
					@click="sortClick(index, item.name, item.screen, item.nums)">
					{{ item.name }}
					</text>
				</block>
			</view>
			<!-- 综合排序结束 -->
			<!-- 筛选开始 -->
			<view class="sortlist sortlist-view" v-if="sortmen">
				<!-- 多选开始 -->
				<block v-for="(item, index) in screendata" :key="index">
					<view class="sortlist-title"></view>
					<view class="sortlist-flex">
						<block v-for="(itemdata, indexs) in item.datas" :key="indexs">
							<text class="Choice" 
							:class="{scractive: itemdata.id == 2}"
							@click="screenchoIce(indexs, itemdata.sign, itemdata.name)">
							{{itemdata.name}}
							</text>
						</block>
					</view>
				</block>
				<!-- 多选结束 -->
				<!-- 单选开始 -->
				<block v-for="(item, index) in person" :key="index">
					<view>
						<view class="sortlist-tile">{{ item.title }}</view>
						<view class="sortlist-flex">
							<block v-for="(itemdata, indexs) in item.datas" :key="indexs">
								<text 
								class="Choice" 
								:class="{scractive: indexs == scrnum }"
								@click="personchoIce(indexs, itemdata.per, itemdata.name)">
								{{itemdata.name}}
								</text>
							</block>
						</view>
					</view>
				</block>
				<!-- 单选结束 -->
				<view class="sortlist-bottom">
					<text @click="clear()">清空</text>
					<text class="confirm" style="background-color: #ffd348;"
					@click="flag && confirm()">完成</text>
				</view>
			</view>
			<!-- 筛选结束 -->
		</view>
		<view class="yin" v-if="ying" @click="backClic()"></view>
	</view>
</template>

<script>
import { postData } from '../../../api/preference/index.js'
import { getSortUrl, getMultipleUrl } from '../../../api/request.js'
	export default {
		data() {
			return {
				synthesize: '综合排序', //默认展示内容
				drop: false, // 综合排序展开状态
				sortmen: false, //筛选展开状态
				ying: false, //阴影背景
				num: 0, //
				scrnum: -1, // 单选选项
				sortlist: [ // 综合排序
					{ name: '综合排序', screen: "_id", nums:1 },
					{ name: '起送价最低', screen : "delivering",nums :1 },
					{ name: '配送费最低', screen : "physical",nums:1 },
					{ name: '人均高到低', screen: "capita",nums: -1 },
					{ name: '人均低到高', screen: "capita",nums:1 },

				],
				screendata: [ //多选
					{ 
						"title":"商家特色(可多选)",
						"datas":[
							{ "id":1, "sign": 'duration', "name":"配送最快" },
							{ "id":2, "sign": 'deliver', "name" :"O元起送" },
							{ "id":3, "sign": "physi", "name":"免配送费"}
						],
					}
				],
				person: [ // 单选
					{
						"title":"人均价",
						"datas":[
							{
								"name": "20元以下",
								"per": {
									"$lt":20,
								},
							},{
								"name" : "20-40元",
								"per":{
									"$lte": 40,	
									"$gte" : 20,
								},
							},{
								"name" : "40元以上",
								"per":{
									"$gt":40,
								},
							}
						],
					}
				],
				multiobj: {},
				flag: false //确定按钮禁用
			}
		},
		watch: {
			multiobj(){
				let obj = JSON.stringify(this.multiobj) == '{}' // true 空对象
				if(obj == true) {
					this.flag = false
				}else {
					this.flag = true
				}
			}
		},
		methods: {
			saLes(e) { //销售高
				this.backClic()
			},
			spDed() { // 速度快 
			},
			unIcon() { // 津贴联盟 
			},
			scReen() { // 筛选
				this.drop = false
				this.sortmen = true
				this.backOne()
			},
			sortClick(index, name, screen, nums) { //综合排序
				this.synthesize = name
				this.num = nums
				this.backClic()
				this.loadingData(screen, nums)
			},
			// 综合排序的请求方法
			async loadingData(screen, nums){
				const data = {
					screen,
					nums
				}
				const res = await postData(getSortUrl, data)
				this.$emit('selected', res.data)
				// this.$store.commit('screenmuta', res.data)
			},
			screenchoIce(indexs, sign, name) { // 多选
				if(this.screendata[0].datas[indexs].id == 1) { //选中
					this.screendata[0].datas[indexs].id = 2
					// this.$set给对象添加一个属性
					this.$set(this.multiobj, sign, sign)
					// this.$set(this.multiobj, name, name)
				}else { // 未选中
					this.screendata[0].datas[indexs].id = 1
					// this.$delete给对象删除一个属性
					this.$delete(this.multiobj, sign)
				}
			},
			personchoIce(indexs, per, name) { // 人均价单选\
				if (this.scrnum == indexs) { // 未选中
					this.scrnum = -1
					this.$delete(this.multiobj, 'capita')
				}else { //选中
					this.scrnum = indexs
					this.$set(this.multiobj, 'capita', per)
				}
			},
			multiple() {
				this.drop = true
				this.sortmen = false
				this.backOne()
			},
			clear() { // 清空
				this.screendata.forEach(item => {
					let arr = item.datas.map(items => {
						items.id = 1
						return items
					})
				})
				this.scrnum = -1,
				this.multiobj = {}
				this.backClic()
			},
			async confirm() { // 完成 
				const res = await postData(getMultipleUrl, this.multiobj)
				if (Array.isArray(res.data)){
					this.$emit('selected', res.data)
				}else {
					uni.showToast({
						title: res.data,
						icon: 'none'
					})
				}
				this.backClic()
			},
			// 透明背景
			backOne() {
				setTimeout(() => {
					this.ying = true
				}, 310)
			},
			// 隐藏透明背景
			backClic() {
				this.ying = false
				this.drop = false
				this.sortmen = false
			},
		}
	}
</script>

<style scoped>
.prefer-posi{
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 99;
}
/* 筛选css开始 */
.delica-view{
	
}
.delica-view .i-image{
	width: 30upx;
	height: 30upx;
	display: block;
}
.delica-view{
	font-size: 30upx;
	display: flex;
	align-items: center;
	color: #666666;
	height: 70upx;
	padding: 0 15upx;
	background: #ffffff;
}
.delica-list{
	display: flex;
	align-items: center;
}
.delica-right{
	justify-content: flex-end;
	flex-grow: 5;
}
.delica-grow{
	flex-grow: 1;
}
/* 筛选css结束 */
/* 排序css开始 */
.sortlist{
	background: #ffffff;
}
.sortlisteltle{}
.sortlisteltle text{
	padding: 0 15upx;
	display: block;
	font-size: 30upx;
	height: 70upx;
	line-height: 70upx;
}
/* 排序css结束 */
/* 筛选css开始 */
.sortlist-tile{
	display: block;
	border-radius: 5upx;
}
.sortlist-flex{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 30upx;
}
/* 筛选css结束 */
/* 综合排序css开始 */
.sortlist{
	background: #ffffff;
}
.sortlitetle{
	display: flex;
	flex-direction: column;
}
.sortlitetle text{
	padding: 0 15upx;
	display: block;
	font-size: 30upx;
	height: 70upx;
	line-height: 70upx;
	border-top: 2upx solid #ededed;
}
.actived{
	color: #f89903 !important;
}
/* 综合排序css结束 */
/* 活动样式开始 */
.scractive{
	background: #fef6df !important;
	color: #f29909 !important;
}
/* 活动样式结束 */
/* 置顶样式css开始 */
/* 置顶样式css结束 */
/* 筛选css开始 */
.sortlist-view{
	height: 700upx;
	overflow: hidden;
	overflow-y: scroll;
	position: relative;
}
.sortlist-title{
	padding: 0 15upx;
	font-size: 30upx;
	height: 60upx;
	line-height: 60upx;
}
.Choice{
	font-size: 28upx;
	background: #f8f8f8;
	height: 55upx;
	line-height: 55upx;
	color: #666666;
	width: calc(100% / 3) - 15px !important;
	margin: 15upx;
	text-align: center;
	display: block;
	border-radius: 5upx;
}
.sortlist-flex{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 30upx;
}
.sortlist-bottom {
	background: #ffffff;
	height: 80upx;
	border-top: 1upx solid #e4e4e4;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.sortlist-bottom text{
	flex-grow: 1;
	height: 80upx;
	line-height: 80upx;
	text-align: center;
}
.sortlist-bottom text:first-child {
	border: 1upx solid #e4e4e4;
};
.confirm{
	background: #ffd348 !important;
	z-index: 99;
};
/* 多选 */
/* 筛选css结束 */

/*阴影css开始*/
.yin{
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	botttom: 0;
	height: 100vh !important;
	width: 100% !important;
}
/*阴影css结束*/
</style>
